<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<style type="text/css">
			.ShopList {
				width: 400px;
				border: 1px dashed red;
			}
		</style>
	</head>
	<body>
		<div class="title">
			<input type="checkbox" name="" id="selectAll" value="" />全选
		</div>
		<div class="wrap">


		</div>
		<div class="all">
			<p>商品数量：<span class="ShopNum">0</span></p>
			<p>商品总计：<span class="ShopCount">¥0</span></p>
		</div>
		<script type="text/javascript">
			let products = [{
					goods_name: '小米10-1',
					goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
					goods_price: '500',
					goods_attr: '砂石黑4GB+64GB',
					goods_num: 10,
					goods_is_checked: false
				},
				{
					goods_name: '小米10-2',
					goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
					goods_price: '510',
					goods_attr: '砂石黑4GB+64GB',
					goods_num: 50,
					goods_is_checked: false
				}
			];
			let wrap = document.getElementsByClassName("wrap")[0];
			let Oinput = wrap.getElementsByTagName("input");
			let isChecked = document.getElementsByClassName("isChecked");
			let ShopNum = document.getElementsByClassName("ShopNum")[0]; //商品数量
			let ShopCount = document.getElementsByClassName("ShopCount")[0];
			let selectAll = document.getElementById("selectAll");
			let str = "";
			for (let i = 0; i < products.length; i++) {
				str +=
					`<div class="ShopList">
				<input type="checkbox" name="" id="" value="" />
				<p>商品名称：${products[i].goods_name}</p>
				<img src="${products[i].goods_img}" />
				<p>商品价格：${products[i].goods_price}</p>
				<p>购买数量：${products[i].goods_num}</p>
				<p>商品规格：${products[i].goods_attr}</p>
				<p class='isChecked'>是否选中：${products[i].goods_is_checked == true ? "选中" : "未选中"}</p>
			</div>
				`
			}
			wrap.innerHTML = str;
			//点击单选按钮设置值
			for (let i = 0; i < Oinput.length; i++) {
				Oinput[i].onclick = function() {
					products[i].goods_is_checked = Oinput[i].checked;
					isChecked[i].innerText = "是否选中：" + (Oinput[i].checked == true ? "选中" : "未选中");
						toDisplay();
						let result = products.every(function(value){
							return value.goods_is_checked == true
						})
						if(!result)
						{
							selectAll.checked = false;
						}
				}
			}
			//有选中商品显示总价和数量
			function toDisplay() {
				let sum = 0;
				let num = 0;
				for (let j = 0; j < products.length; j++) {

					if (products[j].goods_is_checked == true) {
						sum += products[j].goods_num * products[j].goods_price;
						ShopCount.innerText = sum;
						num += products[j].goods_num;
						ShopNum.innerText = num; //
					}
					else
					{
						ShopCount.innerText = num;
					    ShopNum.innerText = sum; //
					}

				}
			}
			//点击全选
			selectAll.onclick=function()
			{
				for(let i = 0;i<Oinput.length;i++)
				{
					Oinput[i].checked = true;
					products[i].goods_is_checked = true;
				}
				toDisplay()
			}
		</script>
	</body>
</html>
